[css-fonts-5][editorial] Add more meta text scale examples#14019
[css-fonts-5][editorial] Add more meta text scale examples#14019davidsgrogan wants to merge 1 commit into
Conversation
|
/cc @progers @JoshTumath |
| <meta name="text-scale" content="scale" /> | ||
| <style> | ||
| .h1 { | ||
| --dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale)); |
There was a problem hiding this comment.
What do you think of adding a comment and a little content, then showing an example of the content at 1.x, 2x, and 3.5x? This will encourage others to test large scales.
<meta name="viewport" content="width=device-width">
<meta name="text-scale" content="scale">
<style>
h1 {
/*
Multiply the 2em baseline by a dampening factor (between 1.0 to 0.5) to
ensure headers scale up, but without getting too large. Here are the
resulting font sizes at various text scale factors:
h1 body
1x 32px 16px
1.5x 40px 24px
2x 48px 32px
3x 64px 48px
3.5x 72px 56px
*/
--dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));
font-size: calc(2em * var(--dampen-factor));
}
</style>
<h1>Header</h1>
This is some body text. The header grows slower than the body text.
There was a problem hiding this comment.
Yeah, that seems good, as long as @fantasai thinks it's appropriate level of detail for the spec. (We could put it in MDN or some other article/documentation.)
Also, note that you can see this PR at https://davidsgrogan.github.io/css-fonts-5/Overview.html#scale-keyword
JoshTumath
left a comment
There was a problem hiding this comment.
These examples are really helpful.
|
|
||
| <div class="example" id="ex-scaled-page"> | ||
| If authors don't alter the '':root'' font size, content sized with ''rem'' units will be relative to the preferred text scale | ||
| Assuming a page hasn't altered the '':root'' font size, content sized with ''rem'' units will be relative to the preferred text scale |
There was a problem hiding this comment.
Might be better to say, "Assuming a page hasn't altered the :root font size with an absolute length unit like px"
| <code><meta name="text-scale" content="scale"></code> in stylesheets so that the ''font-size/medium'' font size will reflect the user's font preferences, whether those are specified at the OS level or the UA level. | ||
| The author will then be able to use ''rem'' and ''em'' throughout the page to honor the user's font preferences. | ||
|
|
||
| Note: |
There was a problem hiding this comment.
Bikeshed has put this paragraph in a separate note box, but this seems like a continuation of the previous one. Do they need to be in the same note box?
| </div> | ||
|
|
||
| <div class="example" id="ex-non-linear"> | ||
| Header text starts larger than body text, so pages should probably grow headers at a slower rate. |
There was a problem hiding this comment.
I think this intro needs more context. How about this:
If an element such as a heading already has large text, it is likely already large enough for a user who needs a high text scale to read. If the large text scales at the same rate as the body text, it could become too large to comfortably fit in the user's viewport.
Therefore, authors should consider using a dampening factor to reduce the rate that large text scales.
| <meta name="text-scale" content="scale" /> | ||
| <style> | ||
| .h1 { | ||
| --dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale)); |
There was a problem hiding this comment.
Might be good to use parentheses around the division so that people don't get confused by BIDMAS/PEMDAS. (Because I did. 😅 I was wondering for ages why it's not just 1 / env(preferred-text-scale).)
| --dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale)); | |
| --dampen-factor: calc(0.5 + (0.5 / env(preferred-text-scale))); |
| Note: | ||
| Authors are expected to use | ||
| <code><meta name="text-scale" content="scale"></code> in stylesheets so that the ''font-size/medium'' font size will reflect a combination of the user's font preferences, whether those are specified at the OS level or the UA level. The author will then be able to use ''rem'' throughout the page to honor the user's font preferences. | ||
| <code><meta name="text-scale" content="scale"></code> in stylesheets so that the ''font-size/medium'' font size will reflect the user's font preferences, whether those are specified at the OS level or the UA level. |
There was a problem hiding this comment.
I think this needs stronger wording so that authors know 'you must only use this if you have tested your website with scaled text'.
Follow up to offline June 1 convo.